<!--
 * @Author: your name
 * @Date: 2021-04-17 14:30:21
 * @LastEditTime: 2021-04-20 21:17:52
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \智慧医疗项目\app\src\views\pages\production\list\list.vue
-->
<template>
  <div class="list">
      <div class="header">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item to="">商品管理</el-breadcrumb-item>
          <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="main">
        <div class="top">
          <div class="left">
            <el-button size="small" @click='dialogFormVisible=true'>新增分类</el-button>
          </div>
          <div class="right">
            <div class="state">
              <span>商品状态</span>
              <el-select v-model="status" size="small" placeholder="请选择" @change="changeSelectStatus">
                <el-option
                  v-for="item in states"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="select">
              <span>商品分类</span>
              <el-select v-model="type" size="small" placeholder="请选择" @change="changeSelect">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="search">
              <el-input type='text' size="small" placeholder="请输入要搜索的分类" v-model="value" @input="changeSearch"></el-input>
              <el-button size="small">搜索</el-button>
            </div>
          </div>
        </div>
          <div class="table">
            <el-table
              :data='tableData'
              ref="multipleTable"
            >
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column type="index" label="序号" width="100"></el-table-column>
              <el-table-column prop="proId" label="商品编码" width="170"></el-table-column>
              <el-table-column prop="proname" label="商品名称" width="150"></el-table-column>
              <el-table-column prop="proImg" label="展示图片" width="150">
                <template slot-scope="scope">
                  <img :src="scope.row.proImg" alt="">
                </template>
              </el-table-column>
              <el-table-column prop="price" label="价格" width="160"></el-table-column>
              <el-table-column label="操作" width="240" class="methods">
                <template slot-scope="scope">
                  <el-button type="text"  size="small">上架</el-button>
                  <el-button type="text"  size="small">下架</el-button>
                  <el-button type="text"  size="small" @click="detail(scope.row)">详情</el-button>
                  <el-button type="text"  size="small">编辑</el-button>
                </template>
              </el-table-column>
            </el-table>
        </div>
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="商品名称" :label-width="formLabelWidth">
              <el-input v-model="form.proname" autocomplete="off"></el-input>
            </el-form-item>
            <template>
              <img :src="row?row.proImg:''" alt="">
            </template>
            <el-form-item label="展示图片" :label-width="formLabelWidth" v-if="flag!=='detail'">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :file-list="fileList"
                list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </el-form-item>
            <el-form-item label="价格" :label-width="formLabelWidth">
              <el-input v-model="form.price" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品介绍" :label-width="formLabelWidth">
              <el-input v-model="form.introduce" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="售后服务" :label-width="formLabelWidth">
              <el-input v-model="form.server" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer" v-if="flag!=='detail'">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
          </div>
        </el-dialog>
      </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
        flag: 'detail',
        title: '商品详情',
        fileList: [],
        tableData: [],
        multipleTable: [],
        options: [{
          value: '请选择',
          label: '请选择'
        }, {
          value: '理疗仪器',
          label: '理疗仪器'
        }, {
          value: '健康保险',
          label: '健康保险'
        }, {
          value: '婴幼用品',
          label: '婴幼用品'
        }],
        states: [{
          value: '请选择',
          label: '请选择'
        }, {
          value: true,
          label: '上架'
        }, {
          value: false,
          label: '下架'
        }],
        type: '',
        status: '',
        dialogFormVisible: false,
        form: {
          proname: '',
          price: '',
          introduce: '',
          server: ''
        },
        formLabelWidth: '120px',
        renderList: [],
        value: '',
        list: [],
        row: null
    }
  },
  mounted() {
    this.getproList()
  },
  methods: {
    async getproList() {
      const { data: res } = await axios.get('/api/proClassify')
      console.log(res)
      if(res.code !== 0) {
        this.$message.error('获取失败')
        return
      }
      let arr = []
      res.data.map(item =>{
        item.children.map(items => {arr.push(items)})
      })
      // console.log(arr)
      this.list = res.data
      this.tableData = arr
      this.renderList = arr
      this.$message.success('获取成功')
    },
    //类名选择
    changeSelect() {
      console.log(this.type, this.list)
      this.tableData = this.type !=='请选择'&&(this.list.filter(item => item.type.includes(this.type))[0].children?this.list.filter(item => item.type.includes(this.type))[0].children:[])||this.renderList
    },
    //上架下架选择
    changeSelectStatus() {
      console.log(this.status)
      this.tableData = this.status !=='请选择'&&this.renderList.filter(item => item.state===this.status)||this.renderList
    },
    //搜索
    changeSearch() {
      this.tableData = this.value !=='' && this.renderList.filter(item => item.proname.includes(this.value))||this.renderList
    },
    //查看详情
    detail(row) {
      this.dialogFormVisible = true
      this.flag = 'detail'
      this.title = '商品详情'
      this.form = row
      this.row = row
      console.log(row)
    }
  }
}
</script>

<style lang='scss' scoped>
.list {
  width: 100%;
  height: 100%;
}
.header {
  width: 100%;
  height: 36px;
  border-bottom: 2px solid skyblue;
}
.main {
  width: 100%;
  .top {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .top .el-button {
    color: skyblue;
    border: 1px solid skyblue;
  }
  .right {
    display: flex;
  }
  .state span{
    font-size: 14px;
    padding-right: 10px;
  }
  .search {
    display: flex;
    padding-left: 10px;
  }
  .search .el-input {
    padding-right: 10px;
  }
  .select span {
    font-size: 14px;
    padding: 0 10px;
  }
  .table {
    width: 100%;
    .methods {
      color: steelblue;
    }
  }
}
</style>